<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">分类管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group grid-table-toolbar">
            <shiro:hasPermission name="category:add">
            <button id="btn_add" type="button" class="btn btn-info" data-toggle="modal" data-target="#AddCategoryModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            </shiro:hasPermission>
        </div>
        <table id="categoryTable" data-mobile-responsive="true" data-click-to-select="true">
            <thead>
            <tr>
                <th data-field="selectItem" data-checkbox="true"></th>
            </tr>
            </thead>
        </table>
    </div>
    <!-- 新增分类 模态框 -->
    <div id="AddCategoryModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新增分类</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <form class="form-horizontal" id="categoryForm4Add">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分类名称 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="name" id="name" require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">上级分类 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control cursor-pointer" id="parentCategorys" value="顶层分类" name="parentName" onclick="showCategorys(1)" readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group categoryFlag catalogFlag">
                                    <label class="col-sm-3 control-label">排序 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control categoryFlag catalogFlag"  name="orderNum" id="orderNum" require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分类描述 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control"  name="description" id="description" placeholder="">
                                    </div>
                                </div>
                                <input type="hidden" class="form-control" id="parentId" name="parentId" >
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="pull-right">
                                    <button type="button" id="saveCategory" class="btn btn-info">确定</button>
                                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <!-- 编辑分类 模态框 -->
    <div id="editCategoryModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑分类</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <form class="form-horizontal" id="categoryForm4Edit">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分类名称 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="name"  require="必填项"  placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">上级分类 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control cursor-pointer" id="edit_parentName" value="顶层分类" name="parentName" onclick="showCategorys(2)" readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group categoryFlag catalogFlag">
                                    <label class="col-sm-3 control-label">排序 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control categoryFlag catalogFlag"  name="orderNum"  require="必填项"   placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">分类描述 :</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control"  name="description"  placeholder="">
                                    </div>
                                </div>
                                <input type="hidden" class="form-control"  name="parentId" id="edit_parentId">
                                <input type="hidden" class="form-control"  name="id" >
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <div class="pull-right">
                                    <button type="button" id="save_EditCategory" class="btn btn-info">确定</button>
                                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>


    <div id="categoryLayer" style="display: none;padding-left: 20px;">
        <ul id="categoryTree" class="ztree"></ul>
    </div>
</section>
<script>
    var editFlag = "[[${@perms.hasPerm('category:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('category:delete')}]]";
    var Categorys = {
        id: "categoryTable",
        table: null,
        layerIndex: -1
    };

    /**
     * 初始化表格的列
     */
    Categorys.initColumn = function () {
        var columns = [
            {
                field: 'selectItem',
                radio: true
            },
            {
                title: '分类名称',
                field: 'name',
                align: 'left',
            },
            {   title: '排序',
                field: 'orderNum',
                align: 'center',
                width: '60px',
            },
            {   title: '分类描述',
                field: 'description',
                align: 'left'
            },
            {
                field : 'operation',
                title : '操作',
                align : "center",
                width: '100px',
                formatter : function(row, index) {
                    var id = row.id;
                    var edit = editFlag=="true"  ? '<a  class="table-btn table-btn-info" href="javascript:editCategory(\'' +id+'\')">编辑</a>' : '';
                    var del = deleteFlag=="true"  ?  '<a  class="table-btn table-btn-danger" href="javascript:deleteCategory(\'' +id+"\',\'"+row.name+'\')">删除</a>' : '';
                    return edit + del;
                }
            }
            ]

        return columns;
    };

    /*加载分类列表*/
    $(function () {
        var colunms = Categorys.initColumn();
        var table = new TreeTable(Categorys.id, "/category/list", colunms,"id");
        table.setExpandColumn(0);
        table.setIdField("id");
        table.setCodeField("id");
        table.setParentCodeField("parentId");
        table.setExpandAll(false);
        /*table.setStriped(true);*/
        table.init();
        Categorys.table = table;
    });

    /*编辑分类*/
    function editCategory(categoryId) {
        Core.postAjax("/category/edit",{id:categoryId},function (data) {
            if(data["data"]){
                var category = data["data"];
                for (let pro in category) {
                    var $input = $("#categoryForm4Edit").find(":input[name=" +pro+ "]");
                    if($input){
                        $input.val(category[pro]);
                    }
                }
                $("#categoryForm4Edit").find(":input[name='name']").val(category["name"]);
                $("#editCategoryModal").modal("show");
            }
        },"get");
    }
    /*删除分类*/
    function deleteCategory(id,name) {
        Core.confirm("确认删除:"+name+"?",function () {
            Core.postAjax('/category/delete',{"id":id},function (data) {
                if(data.status==200){
                    Categorys.table.refresh();
                }
                layer.msg(data.msg);
            });
        })
    }


    $(function () {
        /*  新增分类 */
        $("#btn_add").on("click",function () {
            var selections = getSelections();
            if(selections.length){
                $("#parentCategorys").val(selections[0]["name"]);
                $("#parentId").val(selections[0]["id"]);
            }
        });

        /*新增分类保存事件*/
        $("#saveCategory").on("click",function(){
            if(doValidForm("#categoryForm4Add")){
                Core.mask("#saveCategory");
                Core.postAjax("/category/add",$("#categoryForm4Add").serialize(),function (data) {
                    if(data.status==200){
                        Core.unmask("#saveCategory");
                        $("#AddCategoryModal").modal("hide");
                        Categorys.table.refresh();
                    }
                    layer.msg(data.msg);
                });
            }
        })
        /*新增分类modal框关闭后清空数据*/
        $("#AddCategoryModal").on('hidden.bs.modal',function(){
            resetForm("#categoryForm4Add");
        });
        /* 编辑分类保存事件*/
        $("#save_EditCategory").on("click",function(){
            if(doValidForm("#categoryForm4Edit")){
                Core.mask("#saveCategory");
                Core.postAjax("/category/edit",$("#categoryForm4Edit").serialize(),function (data) {
                    if(data.status==200){
                        Core.unmask("#save_EditCategory");
                        $("#editCategoryModal").modal("hide");
                        Categorys.table.refresh();
                    }
                    layer.msg(data.msg);
                });
            }
        });
        /* 编辑分类modal框关闭后清空数据*/
        $("#editCategoryModal").on('hidden.bs.modal',function(){
            resetForm("#categoryForm4Edit");
        });

    })

    function  resetForm(selector) {
       $(selector)[0].reset();
    }


    function getSelections () {
        var selected = $('#categoryTable').bootstrapTreeTable('getSelections',{id:"id"});
        return selected;
    }

    /*选择上级树*/
    function showCategorys(flag){
        var ztree;
        //树-初始化设置
        var treeSetting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId"
                }
            }
        };
        Core.postAjax('/category/list',null,function (data) {
            var topCategorys = {
                name:"顶层分类",
                id:null,
                parentId:null,
                type:0
            }
            data.unshift(topCategorys);
            $.each(data,function (i, item) {
                item.open=true;
            })
            ztree=$.fn.zTree.init($("#categoryTree"), treeSetting, data);
            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "选择分类",
                area: ['300px', '450px'],
                /* shade: 0,
                 shadeClose: false,*/
                content: jQuery("#categoryLayer"),
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var node = ztree.getSelectedNodes();
                    if(node.length==0){
                        layer.msg("请选择一个类别！",function(){});
                        return;
                    }
                    if(flag==1){
                        //选择上级
                        $("#parentId").val(node[0].id);
                        $("#parentCategorys").val(node[0].name);
                    }else if(flag==2){
                        //选择上级
                        $("#edit_parentId").val(node[0].id);
                        $("#edit_parentName").val(node[0].name);
                    }
                    layer.close(index);
                }
            });
        });
    }


</script>
